<!--会员管理-->
<template>
  <div id="memberUser" class="app-container">
    <!--搜索条件-->
    <div class="filter-container">
      <el-form :model="listQuery" :inline="true">
        <el-form-item label="用户名:">
          <el-input v-model="listQuery.userName" clearable placeholder="请输入会员用户名" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input v-model="listQuery.realName" clearable placeholder="请输入会员姓名" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item label="手机:">
          <el-input v-model="listQuery.mobile" clearable placeholder="请输入会员手机" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item v-if="false" label="来源:">
          <el-select v-model="listQuery.isImmune" placeholder="请选择会员注册来源">
            <el-option label="全部" value="" />
            <el-option label="已实名" value="1" />
            <el-option label="未实名" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" plain @click="handleFilter">搜索</el-button>
          <el-button icon="el-icon-refresh" plain @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--列表-->
    <div class="table-container flex-main">
      <div class="table-container-header">
        <table-toolbar :create="false" :remove="false" @refresh="handleFilter" />
      </div>
      <el-table
        ref="multipleTable"
        :data="list"
        header-cell-class-name="table-header"
        fit
        height="100%"
        highlight-current-row
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        @sort-change="sortChange">
        <el-table-column type="selection" width="60" />
        <el-table-column align="center" prop="id" label="#" width="60">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="头像" prop="avatar" width="70" align="center">
          <template slot-scope="scope">
            <img :src="common.getFileView(scope.row.avatar)" class="common-round-image-32" data-default="avatar" @error="handleImageError">
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="手机号码" prop="mobile" width="110">
          <template slot-scope="scope">
            <memberDetails :id="scope.row.id">
              {{ scope.row.mobile }}
            </memberDetails>
          </template>
        </el-table-column>
        <el-table-column label="用户名" prop="userName" width="150" show-overflow-tooltip />
        <el-table-column label="昵称" prop="nickName" width="130" show-overflow-tooltip />
        <el-table-column label="姓名" prop="realName" width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.realName }}
            <span>
              <el-tooltip v-if="scope.row.realNameStatus===2" class="item" effect="dark" content="已实名" placement="top">
                <div slot="content">
                  <p> 已实名</p>
                  <p>认证时间：{{ scope.row.authTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</p>
                </div>
                <span class="color-primary" style="font-size: 12px;">已实名</span>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="性别" prop="gender" width="50">
          <template slot-scope="scope">
            <span v-if="scope.row.gender===1" class="color-primary">男</span>
            <span v-else-if="scope.row.gender===2" class="color-success">女</span>
            <span v-else class="color-default">未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="birthday" label="生日" width="100">
          <template slot-scope="scope">{{ scope.row.birthday | formatDate('yyyy-MM-dd') }}</template>
        </el-table-column>
        <el-table-column prop="birthday" label="年龄" width="100">
          <template slot-scope="scope">{{ scope.row.birthday | calcAge }}</template>
        </el-table-column>
        <!--<el-table-column label="注册来源" prop="comeSources" width="100" sortable show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.comeSources===0">后台</span>
            <span v-else-if="scope.row.comeSources===1">微信</span>
            <span v-else-if="scope.row.comeSources===2">APP</span>
            <span v-else-if="scope.row.comeSources===3">小程序</span>
            <span v-else-if="scope.row.comeSources===6">门户</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>-->
        <el-table-column label="状态" width="100" prop="isLocked" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isLocked" disabled :active-value="0" :inactive-value="1" />
          </template>
        </el-table-column>
        <el-table-column label="最后登录信息" min-width="160" prop="lastLoginIp">
          <template slot-scope="scope">
            <span>{{ scope.row.lastLoginIp }}</span> <br>
            <span>{{ scope.row.lastLoginTime | formatDate }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="gmtModified" sortable label="修改时间" width="160">
          <template slot-scope="scope">{{ scope.row.gmtModified | formatDate }}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_handler">
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
    </div>
    <!--详情-->

  </div>
</template>

<script>
import memberDetails from './components/memberDetails'
export default {
  components: { memberDetails },
  data() {
    return {
      list: [],
      total: 0,
      submitDate: [],
      listQuery: {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        userName: null,
        realName: null,
        mobile: null,
        sort: '-gmtCreated'
      },

      multipleSelectionRecords: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 表格自带方法开始
    /* 全选/反选*/
    handleSelectionChange(val) {
      this.multipleSelectionRecords = val
    },
    /* 表格行数据单击*/
    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    /* 表格列排序*/
    sortChange(data) {
      const { prop, order } = data
      if (prop) {
        if (order === 'ascending') {
          this.listQuery.sort = '+' + prop
        } else {
          this.listQuery.sort = '-' + prop
        }
      } else {
        this.listQuery.sort = '-gmtCreated'
      }
      this.handleFilter()
    },
    // 表格自带方法结束

    /* 搜索*/
    handleFilter() {
      this.listQuery = {
        ...this.listQuery,
        page: 1
      }
      this.fetchData()
    },
    /* 重置*/
    handleReset() {
      this.listQuery = {
        ...this.listQuery,
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        userName: null,
        realName: null,
        mobile: null,
        sort: '-gmtCreated'
      }
      this.$refs.multipleTable.clearFilter()
      this.$refs.multipleTable.clearSort()
      this.fetchData()
    },
    async fetchData() {
      const response = await this.$store.dispatch('memberUserPage', this.listQuery)
      this.list = response.records
      this.total = response.total
    },
    /* 删除*/
    handleRemoveSingle(row) {
      this.multipleSelectionRecords = []
      this.multipleSelectionRecords.push(row)
      this.$refs.multipleTable.clearSelection()
      this.$refs.multipleTable.toggleRowSelection(row, true)
      this.removeRecord()
    },
    removeRecord() {
      if (this.multipleSelectionRecords.length > 0) {
        const ids = []
        this.multipleSelectionRecords.forEach(function(v, i) {
          ids.push(v.id)
        })
        this.$confirm('此操作将永久删除记录, 是否继续?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('memberUserRemove', ids).then(response => {
            this.handleReset()
            this.$modal.msgSuccess('删除成功')
          }).catch(() => {})
        }).catch(() => { })
      } else {
        this.$modal.msgWarning('请选择要删除的记录')
      }
    },
    async handleTabClick() {
    }

  }
}
</script>
<style lang="scss">
.member-details-container{
  background-color: #fff;
  overflow: auto;
}
</style>
